<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <h2>退款账单</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <Card style="margin-bottom: 10px;">
            <div class="normal-list-page-hd clearfix">
     
              起始时间：<DatePicker class="mr-10" type='date' @on-change='startTime($event)' placeholder='Select date' style='width: 200px'></DatePicker>
           
              结束时间：<DatePicker class="mr-10" type='date' @on-change='endTime($event)' placeholder='Select date' style='width: 200px'></DatePicker>
  
              订单编号：
              <Input placeholder="订单编号" class="mr-10" v-model="queryData.outTradeNo" style="width: 150px" />
              <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
            </div>
          </Card>
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <div>
              <!-- <span style="float: right;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共{{queryData.totalRecord}}条数据</span> -->
              <span style="float: right;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;退款总金额{{list.refundnum}}元</span>
              <span style="float: right;">订单总金额{{list.ordernum}}元</span>

            </div>

          </div>
        </div>
        <!--新建&修改-->
        <Modal v-model="modal.lntegralSet.isShow" :loading="modal.lntegralSet.loading" :mask-closable="false" :title="modal.lntegralSet.title"
          @on-ok="postData">
          <Form ref="lntegralSetFrom" :model="modal.lntegralSet.formData" :rules="modal.lntegralSet.rules" :label-width="120">
            <FormItem label="业务流水" prop="name">
              <Input placeholder="业务流水" v-model="modal.lntegralSet.formData.outTradeNo" style="width:300px;" disabled="disabled" />
            </FormItem>
            <FormItem label="退款金额" prop="totalPay">
              <Input placeholder="退款金额" v-model="modal.lntegralSet.formData.totalPay" style="width:300px;" disabled="disabled" />
            </FormItem>
            <FormItem label="退款理由" prop="reason">
              <Input placeholder="退款理由" v-model="modal.lntegralSet.formData.reason" style="width:300px;" />
            </FormItem>
          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
  import refundApi from "@/api/bill/refund.js";
  import moment from "moment";
  import {
    Message
  } from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    components: {
      queryData
    },
    name: "lntegralSet",
    data() {
      return {
        // 弹出层数据
        modal: {
          lntegralSet: {
            isShow: false,
            thatShow: false,
            loading: true,

            type: "create", // create 新建，update 修改
            title: "新建",
            rules: {
              // month: [
              //   {
              //     required: true,
              // 	message:"请选择月份",
              //     trigger: "blur"
              //   }
              // ],
              garbagenum: [{
                required: true,
                message: "请填写个数",
                trigger: "blur"

              }],
              prenumber: [{
                required: true,
                message: "请填写次数",
                trigger: "blur"
              }],
              reason: [{
                required: true,
                message: '理由不能为空',
                trigger: 'blur'
              }]
            },
            formData: {
              monthArray: [],
              reason: '',
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          ordernum: 0,
          refundnum: 0,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: '订单编号',
              align: 'center',
              key: 'outTradeNo',
              minWidth:100
            }, {
              title: '用户ID',
              align: 'center',
              key: 'userId',
              minWidth:100
            },
            // 开始自动生成
            {
              title: '交易时间',
              align: 'center',
              key: 'payTime',
              minWidth:100
            },
            {
              title: '订单金额',
              align: 'center',
              key: 'buyerPay',
              minWidth:100,
              render: (h, params) => {
                if (params.row.payType == '1') {
                  return h('div', params.row.buyerPay);
                } else if (params.row.payType == '2') {
                  return h('div', params.row.buyerPay / 100)
                }
              }
            },
            {
              title: '退款金额',
              align: 'center',
              key: 'totalPay',
              minWidth:100,
              render: (h, params) => {
                if (params.row.payType == '1') {
                  return h('div', params.row.totalPay);
                } else if (params.row.payType == '2') {
                  return h('div', params.row.totalPay / 100)
                }
              }
            }, {
              title: '支付方式',
              key: 'payType',
              align: 'center',
              minWidth:100,
              render: (h, params) => {
                if (params.row.payType == '1') {
                  return h('div', [h('p', {
                    style: 'color: #17c1dc'
                  }, '支付宝')]);
                } else if (params.row.payType == '2') {
                  return h('div', [h('p', {
                    style: 'color: #228B22'
                  }, '微信')])
                }
              }
            }, {
              title: '订单状态',
              key: 'payStatus',
              align: 'center',
              minWidth: 100,
              render: (h, params) => {
                if (params.row.payStatus == '') {
                  return h('div', [h('p', {
                    style: 'color: #98F5FF'
                  }, '支付成功')]);
                } else if (params.row.payStatus == '1') {
                  return h('div', [h('p', {
                    style: 'color: #CD6600'
                  }, '已退款')]);
                } else if (params.row.payStatus == '2') {
                  return h('div', [h('p', {
                    style: 'color: #EE0000'
                  }, '退款失败')]);
                }
              }
            },

            {
              title: "操作",
              align: "center",
              minWidth: 130,
              render: (h, params) => {
                if (params.row.payStatus == '') {
                  return h("div", {
                    class: "action-group"
                  }, [
                    h(
                      "Button", {
                        props: {
                          type: "error",
                          size: "small"
                        },
                        class: "mr-20",
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row);
                          }
                        }
                      }, '退款'
                    ),

                  ]);
                } else {
                  return h("div", {
                    class: "action-group"
                  }, [
                    h(
                      "Button", {
                        props: {
                          type: "success",
                          size: "small"
                        },
                        class: "mr-20",
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.$Message.warning('已退款，请勿重复操作');
                          }
                        }
                      }, '已退款'
                    ),

                  ]);
                }

              }
            }
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
          name: null,
          month: null,

        }
      };
    },
    methods: {
      startTime(e) {
        let that = this;
        that.queryData.startTime = e;
      },
      endTime(e) {
        let that = this;
        that.queryData.endTime = e;
      },
      orderId(e) {
        alert(e)
        let that = this;
        that.queryData.tradeType = e;
      }, // 获取列表
      getTableData() {
        const that = this;
        that.queryData.totalRecord = undefined;
        refundApi.getPageList(that.queryData)
          .then(res => {
            that.list.tableData = res.data.list;
            that.list.ordernum=0
            that.list.refundnum=0
            for (var i = 0; i < res.data.list.length; i++) {
              if (res.data.list[i].payType == 2) {
                that.list.ordernum += parseFloat(res.data.list[i].buyerPay)
                if (res.data.list[i].payStatus == '1') {
                  that.list.refundnum += parseFloat(res.data.list[i].totalPay)
                }
              } else {
                that.list.ordernum += parseFloat(res.data.list[i].buyerPay)*100
                if (res.data.list[i].payStatus == '1') {
                  that.list.refundnum += parseFloat(res.data.list[i].totalPay)*100
                }
              }

            }
            that.list.ordernum=that.list.ordernum/100
            that.list.refundnum=that.list.refundnum/100

            that.queryData.totalRecord = res.data.totalRecord;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {
            Message.error(error);
          });
      },
      // 修改
      postData() {
        const that = this;
        that.$refs["lntegralSetFrom"].validate((valid) => {
          if (valid) {
            // this.$Message.success('Success!');

            refundApi.update(that.modal.lntegralSet.formData)
              .then(res => {
                that.modal.lntegralSet.isShow = false;
                that.modal.lntegralSet.loading = false;
                if (!res.code) {
                  that.getTableData();
                  that.$Notice.success({
                    title: res.data
                  });
                } else {
                  that.$Notice.error({
                    title: res.message
                  });
                }
              })
              .catch(error => {
                Message.error(error);
              });
          } else {
            // this.$Message.error('请填写理由!');
            that.modal.lntegralSet.loading = false;
            that.$nextTick(() => {
              that.modal.lntegralSet.loading = true;
            });
          }
        })

      },
      getData() {
        const that = this;
        that.$refs["lntegralSetFrom"].validate(valid => {
          if (valid) {
            refundApi.add(that.modal.lntegralSet.formData).then(res => {
              that.modal.lntegralSet.thatShow = false;
              that.modal.lntegralSet.loading = false;
              if (!res.code) {
                that.getTableData();
                that.$Notice.success({
                  title: "保存成功!"
                });
              } else {
                that.$Notice.error({
                  title: res.message
                });
              }
            })
          } else {
            that.modal.lntegralSet.loading = false;
            that.$nextTick(() => {
              that.modal.lntegralSet.loading = true;
            });
          }
        });
      },
      // 查询
      inQuire() {
        const that = this;
		that.queryData.page=1;
        that.list.ordernum = 0;
        that.list.refundnum = 0;
        refundApi.getPageList(that.queryData);
        that.getTableData();
      },

      // 全选，不全选
      // selectionChange(args) {
      //   this.list.selections = args;
      // },

      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },

      // 换页
      changePage(page) {
				
        this.queryData.page = page;
        this.getTableData();
      },

      // 显示新建弹窗
      showCreateModal() {

        this.modal.lntegralSet.type = "create";
        this.modal.lntegralSet.title = "新建";
        this.modal.lntegralSet.formData = {};
        this.modal.lntegralSet.thatShow = true;

      },

      // 显示修改弹窗
      showUpdateModal(data) {
        this.modal.lntegralSet.type = "update";
        this.modal.lntegralSet.title = "退款";
        const that = this;
        refundApi.getDetail(data.outTradeNo).then(res => {
            that.modal.lntegralSet.formData = res.data;
            that.modal.lntegralSet.isShow = true;
          })
          .catch(error => {
            Message.error(error);
          });

      }

    },


    created() {
      this.getTableData();
    }
  };
</script>
